<template>
	<view class="my">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 我的顶部导航模块 -->
		<view class="waterfall" :style="{ marginTop: statusBarHeight + 'px' }">
			<!--账号和退出 -->
			<view class="quit">
				<view>账号：{{userInfo.nickname}}</view>
				<view class="service-notification">
					<view class="quit-btn" @click="announcement">
						<text style="padding-right: 10rpx;">系统公告</text>
						<image class="quit-image" src="/static/muddlednessImg/xinxi.jpg"></image>
					</view>
					<view class="quit-btn" @click="goweb">
						<image class="quit-image" src="/static/homeImg/kefu.png"></image>
						<text>24H客服</text>
					</view>
				</view>
			</view>
			<!-- 资金信息页 -->
			<view class="fund">
				<view class="fund-box">
					<view class="fund-available">可用余额（元）：</view>
					<view class="fund-btn" @tap="tradePassword">
						<view class="park"></view>
						<text class="public-h8">去接单</text>
					</view>
				</view>
				<view class="amount">{{userAllInfo.can_use_balance}}</view>
				<view class="fund-detailed">
					<view class="total-balance">
						<view class="total-balance-title">总余额</view>
						<view class="total-balance-nub">{{userAllInfo.money}}</view>
					</view>
					<view class="total-balance">
						<view class="total-balance-title">交易中</view>
						<view class="total-balance-nub">0.00</view>
					</view>
					<view class="total-balance">
						<view class="total-balance-title">冻结中</view>
						<view class="total-balance-nub">{{userAllInfo.freeze_money}}</view>
					</view>
				</view>
			</view>
			<!-- 返佣信息 -->
			<view class="divide-box">
				<text class="information">今日讯息：</text>
				<view class="divide-info">
					<view class="divide">
						<view class="divide-title">总返佣</view>
						<view class="divide-nub">{{userAllInfo.all_total_rebate}}</view>
					</view>
					<view class="divide">
						<view class="divide-title">我的返佣</view>
						<view class="divide-nub">{{userAllInfo.all_my_rebate}}</view>
					</view>
					<view class="divide">
						<view class="divide-title">下级返佣</view>
						<view class="divide-nub">{{userAllInfo.col_today_xj_rebate}}</view>
					</view>
				</view>
			</view>
			<!--功能栏 -->
			<view class="functional-block">
				<view class="unction-label" @click="topUp">
					<view class="public-center">
						<image class="image2" src="/static/homeImg/chongzhi.png"></image>
						<view class="public-h7">充值</view>
					</view>
				</view>
				<view class="unction-label" @click="TransferAccounts">
					<view class="public-center">
						<image class="image2" src="/static/homeImg/zhaunzhang.png"></image>
						<view class="public-h7">转账</view>
					</view>
				</view>
				<view class="unction-label" @click="collectMoney(0)">
					<view class="public-center">
						<image class="image2" src="/static/homeImg/shoukuanguanli.png"></image>
						<view class="public-h7">收款管理</view>
					</view>
				</view>
				<view class="unction-label" @click="Tutorial">
					<view class="public-center">
						<image class="image2" src="/static/homeImg/xinshoujiaocheng.png"></image>
						<view class="public-h7">新手教程</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<!-- 选项卡 -->
		<view class="Tab">
			<view class="tabs-container">
				<view v-for="(item, index) in tabs" :key="index" class="tab-item"
					:class="{ chooseTab: activeTab === index }" @click="selectTab(index)" :id="'tab-' + index">
					{{ item }}
				</view>
			</view>
			<view class="Historical-order" @click="order">
				<view>历史订单</view>
				<image class="order-img" src="/static/commonImg/huiyou.png"></image>
			</view>
		</view>
		<!-- 内容部分 -->
		<view v-if="tradeList && tradeList.length>0">
			<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
				scroll-with-animation="true">
				<!-- 待支付模板 -->
				<template v-if="activeTab==0">
					<view class="trade-records" v-for="(item,index) in tradeList" :key="index" v-if="item.status==0">
						<view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image" style="margin-right: 10rpx;" :src="payimg(item.bank_type_id)"></image>
								<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>姓名：<text class="fund-nub">{{item.bank_info.real_name}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>代收金额：<text class="fund-nub">{{item.order_money}}</text></view>
							<!-- <view>预计佣金：<text class="fund-nub">365.00</text></view> -->
						</view>
						<!-- <view class="trade-flex trade-top">
							<view>收款账号：<text class="public-black6">金大老板</text></view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">1002</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
						</view> -->
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_info.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_info.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
				</template>
				<!-- 待确认模板 -->
				<template v-if="activeTab==1">
					<view class="trade-records" v-for="(item,index) in tradeList" :key="index" v-if="item.status==1">
						<view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image" style="margin-right: 10rpx;" :src="payimg(item.bank_type_id)"></image>
								<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>姓名：<text class="fund-nub">{{item.bank_info.real_name}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>代收金额：<text class="fund-nub">{{item.order_money}}</text></view>
							<!-- <view>预计佣金：<text class="fund-nub">365.00</text></view> -->
						</view>
						<!-- <view class="trade-flex trade-top">
							<view>收款账号：<text class="public-black6">金大老板</text></view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">1002</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
						</view> -->
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_info.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_info.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
						<view class="Receipt-confirmation">
							<view class="wait-confirm wait-confirm-color" @click="waitConfirm(item,2)">未收到款</view>
							<view class="wait-confirm" @click="waitConfirm(item,1)">确认收款</view>
						</view>
						
					</view>
				</template>
				<!-- 已收款模板 -->
				<template v-if="activeTab==2">
					<view class="trade-records" v-for="(item,index) in tradeList" :key="index" v-if="item.status==2">
						<view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image" style="margin-right: 10rpx;" :src="payimg(item.bank_type_id)"></image>
								<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>姓名：<text class="fund-nub">{{item.bank_info.real_name}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>代收金额：<text class="fund-nub">{{item.order_money}}</text></view>
							<!-- <view>预计佣金：<text class="fund-nub">365.00</text></view> -->
						</view>
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_info.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_info.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
				</template>
				<!-- 暂停中模板 -->
				<template v-if="activeTab==3">
					<view class="trade-records" v-for="(item,index) in tradeList" :key="index" v-if="item.status==3">
						<view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image" style="margin-right: 10rpx;" :src="payimg(item.bank_type_id)"></image>
								<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>姓名：<text class="fund-nub">{{item.bank_info.real_name}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>代收金额：<text class="fund-nub">{{item.order_money}}</text></view>
							<!-- <view>预计佣金：<text class="fund-nub">365.00</text></view> -->
						</view>
						<!-- <view class="trade-flex trade-top">
							<view>收款账号：<text class="public-black6">金大老板</text></view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">1002</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
						</view> -->
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_info.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_info.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
				</template>
				<!-- 已取消模板 -->
				<template v-if="activeTab==4">
					<view class="trade-records" v-for="(item,index) in tradeList" :key="index" v-if="item.status==4">
						<view class="trade-flex trade-top">
							<view class="trade-number" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：<text class="public-black6">{{item.order_number}}</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view>状态：<text class="public-blue">{{orderStart(item.status)}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view class="trade-number">
								<view class="public-flex-fcenter">收款方式：<image class="copy-image" style="margin-right: 10rpx;" :src="payimg(item.bank_type_id)"></image>
								<text class="public-black6">{{paytype(item.bank_type_id)}}</text>
								</view>
							</view>
							<view>姓名：<text class="fund-nub">{{item.bank_info.real_name}}</text></view>
						</view>
						<view class="trade-flex trade-top">
							<view>代收金额：<text class="fund-nub">{{item.order_money}}</text></view>
							<!-- <view>预计佣金：<text class="fund-nub">365.00</text></view> -->
						</view>
						<!-- <view class="trade-flex trade-top">
							<view>收款账号：<text class="public-black6">金大老板</text></view>
							<view class="trade-number">
								<view>付款人：<text class="public-black6">1002</text></view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
						</view> -->
						<!-- 银行卡特有信息 -->
						<view class="trade-flex trade-top" v-if="item.bank_type_id == 1">
							<view>收款银行：<text class="public-black6">{{item.bank_info.bank_name}}</text></view>
							<view class="trade-number">
								<view>开户网点：<text class="public-black6">{{item.bank_info.bank_branch}}</text></view>
							</view>
						</view>
						<view class="trade-top">创建时间：{{timeString(item.createtime)}}</view>
					</view>
				</template>
				<!-- 加载状态提示 -->
				<view v-if="isLoading" class="loading-text">加载中...</view>
				<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
			</scroll-view>
		</view>
		<EmptyRecord v-else></EmptyRecord>
		<!-- 温馨提示弹窗组件 -->
		    <PromptPopup 
			  :pointOut="popuptxt"
			  :popupType="popupType"
			  :option ="option"
		      ref="pointOut"
			  @confirm="collectMoney"
		    />
	</view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss"></style>